<template>
    <div class="box">
        <van-nav-bar
        title="签到"
        left-arrow
        @click-left="onClickLeft"/>
        <div class="box1">
            <van-steps :active="active" class="step" active-icon="passed" active-color="orange" inactive-color="sienna">
                <van-step>第1天</van-step>
                <van-step>第2天</van-step>
                <van-step>第3天</van-step>
                <van-step>第4天</van-step>
                <van-step>第5天</van-step>
                <van-step>第6天</van-step>
                <van-step>第7天</van-step>
            </van-steps>
            <button class="btn-reach" @click="reach" :disabled="isButtonDisabled">签到</button>
        </div>
        <div class="goodbooks">
            <div class="rubbish"></div>
            <h4>男生最爱</h4>
            <van-icon class="icon-flush" name="replay" />
            <span class="flush">换一批</span>
        </div>
        <div class="books2">
            <book-item v-for="item in books2" :key="item.id" :books="item"></book-item>
        </div>


        <div class="null"></div>
        <div class="goodbooks">
            <div class="rubbish"></div>
            <h4>免费好书</h4>
            <van-icon class="icon-flush" name="replay" />
            <span class="flush">换一批</span>
        </div>
        <div class="books2">
            <book-item v-for="item in books2" :key="item.id" :books="item"></book-item>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import bookItem from '@/components/bookItem';
import { getBooksApi } from '@/api/booksApi';
    export default {
        async created() {
            this.$root.$children[0].$children[1].isShowHead = false;
            let books =await getBooksApi();
            this.books2 = books.slice(4,10);
            
        },
        beforeDestroy() {
            this.$root.$children[0].$children[1].isShowHead = true;
        },
        components: {
            bookItem
        },
        methods: {
            onClickLeft() {
                this.$router.push('city_boys');
            },
            reach() {
                Toast.success('签到成功');
                if(this.active < 6){
                    this.active++;
                }else{
                    this.active = 0;
                }
                this.isButtonDisabled = true;
            }
        },
        data() {
            return {
                active: 0,
                isButtonDisabled:false,
                books2: []
            }
        },
    }
</script>

<style lang="scss" scoped>
.box{
    padding-bottom: 50px;
}
.box1{
    width: 100%;
    height: 158px;
    background-color: #99cccc;
    position: relative;
    border: 1px solid #99cccc;
}
.step{
    margin-top: 30px;
    background-color: #99cccc;
}
.btn-reach{
    width: 119px;
    height: 36px;
    border-radius: 20px;
    border: none;
    position: absolute;
    top:60%;
    left:50%;
    transform: translate(-50%);
}
.null{
    width: 100%;
    height: 12px;
    background-color: #f2f2f2;
}
.goodbooks{
   width: 100%;
   height: 54px;
}
.goodbooks>h4{
    font-size: 16px;
    font-weight: 400;
    line-height: 54px;
    float: left;
}
.rubbish{
    width: 3px;
    height: 16px;
    background-color: #2bb283;
    float: left;
    margin-top: 19px;
    margin-left: 14px;
    margin-right: 5px;
}
.flush{
    width: 42px;
    height: 18px;
    float: right;
    font-size: 14px;
    margin-top: 15px;
    margin-right: 5px;
}
.icon-flush{
    width: 16px;
    height: 16px;
    float: right;
    margin-top: 17px;
    margin-right: 20px;
}
.books2{
    width: 100%;
    height: 400px;
}
</style>